<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="span-top">
                <span class="seachStatus">
                    {{$t('clgcmptim')}}
                    <el-date-picker :placeholder="$t('plsset')" v-model="dictime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                </span>
                <span class="seachCSC">
                    {{$t('mertid')}}
                    <el-input v-model.trim="clarifyForm.merId" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachCSC">
                    {{$t('batchNo')}}
                    <el-input v-model.trim="clarifyForm.batchNo" :placeholder="$t('plsset')" size="mini"></el-input>
                </span>
            </span>
            <span class="span-bottom">
                <span class="seachCSC">
                    {{$t('clrgsta')}}
                    <el-select v-model="clarifyForm.settleFlag" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                        <el-option :label="$t('notyetcld')" value="0"></el-option>
                        <el-option :label="$t('clrunset')" value="1"></el-option>
                        <el-option :label="$t('settled')" value="2"></el-option>
                        <el-option :label="$t('nosetreq')" value="9"></el-option>
                    </el-select>
                </span>
                <span class="seachXAC">
                    {{$t('plaodrnum')}}
                    <el-input v-model.trim="clarifyForm.payOrderNo" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachXAC">
                    {{$t('mertodrnum')}}
                    <el-input v-model.trim="clarifyForm.merOrderNo" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seach" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
                <el-button type="success" @click="exportExcel" size="mini" v-preventReClick>{{$t('expot')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" row-key="funcId" :data="clarifyTab" id="out-table">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('mertnam')" width="160">
                </el-table-column>
                <el-table-column prop="merId" :label="$t('mertid')" width="160">
                </el-table-column>
                <el-table-column prop="settleSerialNo" :label="$t('clearsernum')" width="175">
                </el-table-column>
                <el-table-column prop="batchNo" :label="$t('clrbatno')" width="175">
                </el-table-column>
                <el-table-column prop="payOrderNo" :label="$t('plaodrnum')" width="165">
                </el-table-column>
                <el-table-column prop="merOrderNo" :label="$t('mertodrnum')" width="210">
                </el-table-column>
                <el-table-column prop="productCode" :label="$t('protnam')" width="154">
                </el-table-column>
                <el-table-column prop="payAmt" width="145" :label="$t('trastamt')">
                </el-table-column>
                <el-table-column prop="amt" width="140" :label="$t('amountofacc')">
                </el-table-column>
                <el-table-column prop="fee" width="120" :label="$t('servchrg')">
                </el-table-column>
                <el-table-column prop="channelNo" width="107" :label="$t('chnlnam')">
                </el-table-column>
                <el-table-column prop="transType" width="122" :label="$t('trstyp')">
                </el-table-column>
                <el-table-column prop="settleFlag" :label="$t('clrgsta')" width="125">
                </el-table-column>
                <el-table-column prop="gmtCreate" :label="$t('transactiontime')" width="165">
                </el-table-column>
                <el-table-column width="90" :label="$t('opratn')" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="detailssRec(scope.row.settleSerialNo)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="clarifyForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="clarifyForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    disreclist
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
import { isNumberVlidator } from '@/libs/isNum.js'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    data () {
        return {
            total: 0,
            dictime: [],
            today: null,
            clarifyForm: {
                batchNo: null,
                merName: null,
                merOrderNo: null,
                payOrderNo: null,
                settleSerialNo: null,
                transStartTime: null,
                transEndTime: null,
                merId: null,
                channelName: null,
                settleFlag: null,
                pageNum: 1,
                pageSize: 10
            },
            clarifyTab: [],
            detsRecForm: {}
        }
    },
    methods: {
        getClarify () {
            disreclist(JSON.stringify(this.clarifyForm)).then(res => {
                if (res.data.code !== '000000') {
                    this.$message.error(res.data.msg)
                }
                this.total = res.data.data.total - 0
                this.clarifyTab = res.data.data.list
                this.clarifyTab.forEach(item => {
                    if (item.transType === 'RECHARGE') item.transType = this.$t('recharge')
                    if (item.transType === 'CONSUME') item.transType = this.$t('consumption')
                    if (item.transType === 'WITHDRAW') item.transType = this.$t('cashwiaw')
                    if (item.transType === 'REFUND') item.transType = this.$t('refund')
                    if (item.transType === 'TRANSFER') item.transType = this.$t('tranacc')
                    if (item.transType === 'REPAYMENT') item.transType = this.$t('repayment')
                    if (item.settleFlag === 0) item.settleFlag = this.$t('notyetcld')
                    if (item.settleFlag === 1) item.settleFlag = this.$t('clrunset')
                    if (item.settleFlag === 2) item.settleFlag = this.$t('settled')
                    if (item.settleFlag === 9) item.settleFlag = this.$t('nosetreq')
                    if (item.productCode === 'SCAN_PAY_CODE') item.productCode = this.$t('paycodement')
                    if (item.productCode === 'SCAN_REC_CODE') item.productCode = this.$t('paybycollcode')
                    if (item.productCode === 'SDK_CONSUME') item.productCode = this.$t('sdkconsump')
                    if (item.productCode === 'PLAT_CONSUME') item.productCode = this.$t('platformcon')
                    if (item.productCode === 'SETTLE_PAY') item.productCode = this.$t('settmoney')
                })
            })
        },
        seach () {
            this.clarifyForm.pageNum = 1
            if (this.dictime != null) {
                this.clarifyForm.transStartTime = this.dictime[0]
                this.clarifyForm.transEndTime = this.dictime[1]
            }
            if (!this.dictime) {
                this.clarifyForm.transStartTime = null
                this.clarifyForm.transEndTime = null
            }
            this.getClarify()
        },
        handleSizeChange (newSize) {
            this.clarifyForm.pageSize = newSize
            this.getClarify()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.clarifyForm.pageNum = newNum
            this.getClarify()
        },
        detailssRec (id) {
            window.sessionStorage.setItem('handlePayNo', id)
            this.$router.push('/sec/disRecDet')
        },
        exportExcel () {
            let fix = document.querySelector('.el-table__fixed-right')
            let xlsxParam = { raw: true }
            /* generate workbook object from table */
            let wb
            if (fix) {
                wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix), xlsxParam)
                document.querySelector('#out-table').appendChild(fix)
            } else {
                wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam)
            }
            /* get binary string as output */
            let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }), '清分记录.xlsx')
            } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
            return wbout
        }
    },
    mounted () {
        this.clarifyForm.transStartTime = getInitDate(7, 0)
        this.clarifyForm.transEndTime = getInitDate(0, 0)
        this.dictime.push(this.clarifyForm.transStartTime)
        this.dictime.push(this.clarifyForm.transEndTime)
        this.getClarify()
    }
}
</script>

<style lang="less" scoped>
@import './disRec.less';
</style>
